<!--
 * @authors 沙洲 chenchenyixin@qq.com http://gitee.com/shazhou
 * @date    2019-12-25 15:17:44
-->

<template>
  <ul class="navbar border-top">
    <li class="item" :class="defaultIndex==index?'active':''" v-for="(item,index) of navbarList" :key="index" @click="navbarSelect(index,item.page)">
      <img :src="item.src" alt="">
      <p>{{item.title}}</p>
    </li>
  </ul>
</template>

<script>
export default {
  name: 'navbar',
  data(){
	  return{
      navbarList:[{
        src:'//img12.360buyimg.com/jrpmobile/jfs/t3451/188/644771475/2428/800d7cb7/580f2435Nbfaa8055.png?width=66&height=66',
        title:'首页',
        page:'home'
      },{
        src:'//img12.360buyimg.com/jrpmobile/jfs/t3811/55/345433999/2930/116d3dd1/580f1e25N028a1f2c.png?width=66&height=66',
        title:'理财',
        page:'money'
      },{
        src:'//img12.360buyimg.com/jrpmobile/jfs/t3343/179/621044750/1484/5af6b11a/580f50e4N005181d0.png?width=66&height=66',
        title:'白条',
        page:'ious'
      },{
        src:'//img12.360buyimg.com/jrpmobile/jfs/t3604/98/635506544/2317/443d3a51/580f240aNbee3dcc4.png?width=66&height=66',
        title:'众筹',
        page:'raise'
      },{
        src:'//img12.360buyimg.com/jrpmobile/jfs/t3340/68/639059082/2591/800e2d6b/580f51cdN4caf20b2.png?width=66&height=66',
        title:'我的',
        page:'my'
      }],
      defaultIndex:0
	  }
  },
  props:{
  
  },
  components:{

  },
  created(){

  },
  mounted(){

  },
  methods:{
    navbarSelect(index,page){
      if(this.$route.name==page){
        console.log(`重复点击相同路由，return`)
        return
      }
      this.defaultIndex=index
      this.$router.push(`${page}`)
    },
    setPage(index){
      this.defaultIndex=index
    }
  },
  watch:{
    $route(){//监听路由，设置page，会出现菜单闪动
      let page=this.$route.name
      switch(page){
        case 'home':
          this.setPage(0)
        break;
        case 'money':
          this.setPage(1)
        break;
        case 'ious':
          this.setPage(2)
        break;
        case 'raise':
          this.setPage(3)
        break;
        case 'my':
          this.setPage(4)
        break;
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/stylus/mixins.styl'
.navbar
  position:fixed
  left:0
  bottom:0
  height:50px
  background:#fff
  width:100%
  list(flex,row)
  justify-content:center
  align-items:center
  .item
    flex:1
    img
      width:26%
      margin:0 auto
      display:block
    p
      font-size:12px
      color:#333
      text-align:center
      margin-top:5px
  .active
    p
      color:red
  

</style>


